import {View, Text, Button as Button2,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert ,Image,Pressable,ImageBackground} from 'react-native';
import { styles} from './MyStyle';
import {MyButton01, showToast} from './UiComponents';

import React, { useState, useEffect } from 'react';

import { useSelector, useDispatch } from 'react-redux';
import NativeLocalStorage from './specs/NativeLocalStorage';

import * as Progress from 'react-native-progress';

import  {BasicCircle,
  CircularProgressBar2,
  Reanimated01,
  AnimatedCircle2,
  Reanimated02,
  Reanimated03,
  Reanimated04
}  from  './SVG01'

import { BackButton } from './UiComponents';

import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { Center } from 'native-base';
import { fromPairs } from '@nozbe/watermelondb/utils/fp';

// https://redux.js.org/introduction/getting-started
// npm install redux react-redux


export function WaitingScreen() {

  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
    }, 15);

    return () => clearInterval(interval);
  }, []);


  return <View style={styles.circles}>


<BasicCircle></BasicCircle>

{/* <CircularProgressBar2 progress={progress}></CircularProgressBar2> */}
<Reanimated01 progress={progress}/>
<Reanimated04 progress={progress}/>
<Reanimated02 progress={progress}/>
<Reanimated03 progress={progress}/>
<AnimatedCircle2></AnimatedCircle2>
      </View>;
}
